<template>
  <div>
    <div id="main" ref="chart"></div>
  </div>
</template>
<script>
import axios from "axios";
// var data = [];
// for (let i = 0; i < 3; ++i) {
//   data.push(Math.round(Math.random() * 200));
// }
var echarts = require("echarts");
export default {
  name: "iprank",
  data() {
    return {
      data: {
        xAxis: {
          max: 'dataMax',
        },
        yAxis: {
          type: 'category',
          data: [],
          inverse: true,
          animationDuration: 300,
          animationDurationUpdate: 300,
          // max: 2 // only the largest 3 bars will be displayed
        },
        series: [{
          realtimeSort: true,
          name: 'X',
          type: 'bar',
          data: [],
          label: {
            show: true,
            position: 'right',
            valueAnimation: true
          }
        }],
        legend: {
          show: true
        },
        animationDuration: 0,
        animationDurationUpdate: 3000,
        animationEasing: 'linear',
        animationEasingUpdate: 'linear'
      }
    }
  },
  mounted() {
      var chart = echarts.init(this.$refs.chart);
      this.refresh(chart);
      this.timer = window.setInterval(() => {
        setTimeout(() => {
          this.refresh(chart)
        },0)
      },5000)
  },
  methods: {
    // [
    //     [
    //       "220.181.38.148",
    //       100
    //     ],
    //     [
    //         "127.0.0.53",
    //         10
    //     ],
    //     [
    //       "127.0.0.1",
    //       8
    //     ],
    //     [
    //       "114.114.114.114",
    //       8
    //     ]
    // ]
    refresh: function (chart) {
      var that = this;
      axios.get("http://127.0.0.1:5000/getipsortlist").then(
          function (res) {
            var data  = res.data
            that.data.yAxis.data = [data[0][0], data[1][0], data[2][0]];
            that.data.series[0].data = [data[0][1], data[1][1], data[2][1]]
          }
      )
      chart.setOption(this.data);
    }
  },
  destroyed() {
    window.clearInterval(this.timer)
  },
  props: [
  ]
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#main {
  width: 500px;
  height: 280px;
  margin-left: 25px;
}
</style>